<form id="<?php echo $uniqid;?>" method="post" style="padding: 0;">
    <table border="0" width="100%" cellspacing="1" cellpadding="0" class="formtable">
        <tr>
            <td>
                <p>如使用导入订单，需完善发货表单物流信息后再上传；</p>
                <div class="batchSendTypeTitle" style="padding:20px">
                    <el-upload
                            class="upload-box"
                            drag
                            :multiple="false"
                            :on-success="uploaded"
                            :limit="1"
                            action="/admin/order/uploadbatchfile">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em> 只能上传excel文件，且不超过20mb</div>
                    </el-upload>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="flex">
                    <div>
                        选择物流
                        <select id="batchsendExpress" style="width:250px;"></select>
                    </div>                    
                </div>
            </td>
        </tr>
    </table>
</form>

<script>
    var batchsendVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            batchsendParams:{
                uploadFile: '',
                express_id: '',
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {},
            uploaded(response, file, fileList) {
                this.batchsendParams.uploadFile = response.data;
            },
            submit: function () {
                this.batchsendParams.express_id = $('#batchsendExpress').combogrid('getValue');
                if(this.batchsendParams.uploadFile===''){
                    $.messager.alert('提示', '请上传发货单', 'warning');
                    return;
                }
                if(!this.batchsendParams.express_id){
                    $.messager.alert('提示', '请选择快递公司', 'warning');
                    return;
                }
                showLoading('#<?php echo $uniqid;?>');
                $.post('/admin/order/batchsend', batchsendVm.batchsendParams, function (data) {
                    hideLoading();
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        orderVm && orderVm.init();
                        $("#orderdeliverydlg").dialog('close');
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });

    $(function () {
        $('#batchsendExpress').combogrid({
            panelWidth:470,
            panelHeight:380,
            idField:'id',
            textField:'name',
            url:'/admin/order/express',
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 20, 30, 50],
            method: 'post',
            columns:[[
                {field:'code',title:'编码',width:100},
                {field:'name',title:'快递公司名称',width:200},
                {field:'weigh',title:'权重',width:70},
            ]]
        });
        $('#orderdeliverysubmit').click(function (data) {
            batchsendVm.submit();
        });
    });
</script>

<style>
    .tip-container {
        display: flex;
        margin-bottom: 10px;
    }
    .order-main-btn {
        margin-right: 20px;
        width: 88px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #fff;
        border-radius: 4px;
        background: #753ECD;
        cursor: pointer;
    }
    .order-detail-tip-title {
        color: #FFB333;
    }
    .order-detail-remark {
        color: #7438D5;
    }
    .all-refund-money-text {
        color: #FF5959;
        cursor: pointer;
    }

    .order-msg-right-money {
        font-size: 20px;
        color: #FF5000;
    }

    .order-msg-center {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .order-msg-center .el-steps.el-steps--horizontal {
        width: 84%;
    }

    .el-steps {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .el-steps--simple {
        padding: 13px 8%;
        border-radius: 4px;
        background: #f5f7fa;
    }

    .el-steps--horizontal {
        white-space: nowrap;
    }

    .el-steps--vertical {
        height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    .el-step {
        position: relative;
        -ms-flex-negative: 1;
        flex-shrink: 1;
    }

    .el-step:last-of-type .el-step__line {
        display: none;
    }

    .el-step:last-of-type.is-flex {
        -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
    }

    .el-step:last-of-type .el-step__description,
    .el-step:last-of-type .el-step__main {
        padding-right: 0;
    }

    .el-step__head {
        position: relative;
        width: 100%;
    }

    .el-step__head.is-process {
        color: #303133;
        border-color: #303133;
    }

    .el-step__head.is-wait {
        color: #c0c4cc;
        border-color: #c0c4cc;
    }

    .el-step__head.is-success {
        color: #67c23a;
        border-color: #67c23a;
    }

    .el-step__head.is-error {
        color: #f56c6c;
        border-color: #f56c6c;
    }

    .el-step__head.is-finish {
        color: #7438d5;
        border-color: #7438d5;
    }

    .el-step__icon {
        position: relative;
        z-index: 1;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 24px;
        height: 24px;
        font-size: 14px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        -webkit-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
    }

    .el-step__icon.is-text {
        color: #fff;
        border-radius: 50%;
        border: 2px solid;
        border-color: inherit;
    }

    .el-step__icon.is-icon {
        width: 40px;
    }

    .el-step__icon-inner {
        display: inline-block;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        font-weight: 700;
        line-height: 1;
        color: inherit;
    }

    .el-step__icon-inner[class*="el-icon"]:not(.is-status) {
        font-size: 25px;
        font-weight: 400;
    }

    .el-step__icon-inner.is-status {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    .el-step__line {
        position: absolute;
        border-color: inherit;
        background-color: #c0c4cc;
    }

    .el-step__line-inner {
        display: block;
        border-width: 1px;
        border-style: solid;
        border-color: inherit;
        -webkit-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 0;
        height: 0;
    }

    .el-step__main {
        white-space: normal;
        text-align: left;
    }

    .el-step__title {
        font-size: 16px;
        line-height: 38px;
    }

    .el-step__title.is-process {
        font-weight: 500;
        color: #303133;
    }

    .el-step__title.is-wait {
        color: #c0c4cc;
    }

    .el-step__title.is-success {
        color: #444;
    }

    .el-step__title.is-error {
        color: #f56c6c;
    }

    .el-step__title.is-finish {
        color: #7438d5;
    }

    .el-step__description {
        padding-right: 10%;
        margin-top: -5px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
    }

    .el-step__description.is-process {
        color: #303133;
    }

    .el-step__description.is-wait {
        color: #c0c4cc;
    }

    .el-step__description.is-success {
        color: #999;
    }

    .el-step__description.is-error {
        color: #f56c6c;
    }

    .el-step__description.is-finish {
        color: #7438d5;
    }

    .el-step.is-horizontal {
        display: inline-block;
    }

    .el-step.is-horizontal .el-step__line {
        height: 1px;
        top: 11px;
        left: 0;
        right: 0;
    }

    .el-step.is-vertical {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .el-step.is-vertical .el-step__head {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        width: 24px;
    }

    .el-step.is-vertical .el-step__main {
        padding-left: 10px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .el-step.is-vertical .el-step__title {
        line-height: 24px;
        padding-bottom: 8px;
    }

    .el-step.is-vertical .el-step__line {
        width: 2px;
        top: 0;
        bottom: 0;
        left: 11px;
    }

    .el-step.is-vertical .el-step__icon.is-icon {
        width: 24px;
    }

    .el-step.is-center .el-step__head {
        text-align: center;
    }

    .el-step.is-center .el-step__main {
        text-align: center;
    }

    .el-step.is-center .el-step__description {
        padding-left: 20%;
        padding-right: 20%;
    }

    .el-step.is-center .el-step__line {
        left: 50%;
        right: -50%;
    }

    .el-step.is-simple {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .el-step.is-simple .el-step__head {
        width: auto;
        font-size: 0;
        padding-right: 10px;
    }

    .el-step.is-simple .el-step__icon {
        background: 0 0;
        width: 16px;
        height: 16px;
        font-size: 12px;
    }

    .el-step.is-simple .el-step__icon-inner[class*="el-icon"]:not(.is-status) {
        font-size: 18px;
    }

    .el-step.is-simple .el-step__icon-inner.is-status {
        -webkit-transform: scale(0.8) translateY(1px);
        transform: scale(0.8) translateY(1px);
    }

    .el-step.is-simple .el-step__main {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .el-step.is-simple .el-step__title {
        font-size: 16px;
        line-height: 20px;
    }

    .el-step.is-simple:not(:last-of-type) .el-step__title {
        max-width: 50%;
        word-break: break-all;
    }

    .el-step.is-simple .el-step__arrow {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .el-step.is-simple .el-step__arrow::after,
    .el-step.is-simple .el-step__arrow::before {
        content: "";
        display: inline-block;
        position: absolute;
        height: 15px;
        width: 1px;
        background: #c0c4cc;
    }

    .el-step.is-simple .el-step__arrow::before {
        -webkit-transform: rotate(-45deg) translateY(-4px);
        transform: rotate(-45deg) translateY(-4px);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .el-step.is-simple .el-step__arrow::after {
        -webkit-transform: rotate(45deg) translateY(4px);
        transform: rotate(45deg) translateY(4px);
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }

    .el-step.is-simple:last-of-type .el-step__arrow {
        display: none;
    }

    .el-step.is-center .el-step__head {
        text-align: center;
    }

    .el-step__head.is-success {
        color: #7536D0;
        border-color: #7536D0;
    }

    .el-step__head {
        position: relative;
        width: 100%;
    }

    .el-step__head.is-success .el-step__icon.is-text {
        background: #7536D0;
    }

    .el-step__icon.is-text {
        background: #eee;
        border: 4px solid #fff;
    }

    .el-step__icon.is-text {
        border-radius: 50%;
    }

    .el-step__icon {
        width: 38px;
        height: 38px;
    }

    .el-step.is-horizontal .el-step__line {
        top: 18px;
    }

    .el-table th .cell, .el-table td .cell {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-table th.is-leaf {
        border-bottom: none;
    }

    .el-table td, .el-table th, .el-table th.is-leaf {
        border-color: #f7f7f7;
    }

    .el-table th {
        font-size: 13px;
    }

    .el-table th {
        background: #F9F9F9;
    }

    .el-table th {
        padding: 7px 0;
    }

    .el-table, .el-table thead, .el-table th {
        color: #444;
        font-weight: 500;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    .theme-color {
        color: #7536D0;
    }
    .upload-box {
        text-align: center;
    }
    .upload-box .el-upload-dragger{
        width: 500px;
        height: 150px;
    }
</style>
